<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="./js/vue.js"></script>
<body>
    <div class="box">
        <input type="text" v-model="firstName"><br>
        <input type="text" v-model="lastName"><br>
        <input type="text" v-model="fullName"><br>
        <input type="text" v-model="obj.age"><br>
        <hr>
        <input type="text" v-model="fullName1"><br>
        <input type="text" v-model="obj2.age"><br>
    </div>
    <script>
        let vm = new Vue({
            el:'.box',
            data:{
                firstName:'sun',
                lastName:'xin',
                fullName:'sun-xin',
                fullName1:'sun-xin',
                obj:{
                    name:'jack',
                    age:18
                },
                obj2:{
                    name:'rose',
                    age:19
                }
            },
            watch:{
                // 简写方式 因为要深度监视所以不推荐用
                firstName(value){
                    // 侦听器或者又叫监视 监视data对象中的数据，当数据变化便可以做一些运算
                    //监视基本数据类型
                    //当被监视的属性值发生变化,监听的回调中就能收到其最新值
                    console.log(value);
                    this.fullName = value + '-' + this.lastName;
                },
                // lastName(value){
                //     this.fullName = this.firstName + '-' + value;
                // },
                //标准写法
                lastName:{
                    handler(value){
                        this.fullName = this.firstName + '-' + value;
                    }
                },
                fullName(value){
                    let arr = value.split('-');
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                },
                // 监听引用数据类型时使用深度监视
                obj:{
                    // 监视函数名必须是handler
                    handler(value){
                        console.log(value);
                       
                    },
                     deep:true,//深度监视
                     immediate:true,// 立即执行 不改变当前监视的值，就能触发回调
                }
            }
        })

        // console.log(vm);
        vm.$watch('fullName1',(newValue,oldValue)=>{
            console.log(newValue,oldValue);
        })
        vm.$watch('obj2',(newValue,oldValue)=>{
            //监听对象或者数组(引入数据类型时,newValue和oldValue是相同的)
            console.log(newValue,oldValue);
        },{
            deep:true
        })
    </script>
</body>
</html>